<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看修改评论</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header>
        <h1>查看修改评论</h1>
    </header>
    <div class="container">
        <nav>
            <ul>
                <li><a href="admin.html">首页</a></li>
                <li><a href="add-car.html">添加新车辆</a></li>
                <li><a href="rentals.html">查看所有车辆情况</a></li>
                <li><a href="edit-user.html">修改用户信息</a></li>
                <li><a href="reviews.html" class="active">查看修改评论</a></li>
                <li><a href="orders.html">查看订单</a></li>
            </ul>
        </nav>
        <main>
            <section>
                <h2>查看修改评论</h2>
                <table id="review-table">
                    <thead>
                        <tr>
                            <th>评论ID</th>
                            <th>用户</th>
                            <th>评论内容</th>
                            <th>评分</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 评论信息行 (假数据) -->
                        <tr>
                            <td>101</td>
                            <td>张三</td>
                            <td>服务非常好！</td>
                            <td>5</td>
                            <td><button class="edit-button">修改</button></td>
                        </tr>
                        <tr>
                            <td>102</td>
                            <td>李四</td>
                            <td>车况不错。</td>
                            <td>4</td>
                            <td><button class="edit-button">修改</button></td>
                        </tr>
                        <!-- 更多评论信息行 -->
                    </tbody>
                </table>
                <div class="pagination">
                    <button id="prev-page">上一页</button>
                    <span id="page-info">第 <span id="current-page">1</span> 页</span>
                    <button id="next-page">下一页</button>
                </div>
            </section>
        </main>
    </div>

    <!-- 模态框 -->
    <div id="edit-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>修改评论</h2>
            <form id="edit-form">
                <label for="edit-review-id">评论ID:</label>
                <input type="text" id="edit-review-id" name="review-id" readonly>
                <label for="edit-user">用户:</label>
                <input type="text" id="edit-user" name="user" readonly>
                <label for="edit-content">评论内容:</label>
                <textarea id="edit-content" name="content"></textarea>
                <label for="edit-rating">评分:</label>
                <input type="number" id="edit-rating" name="rating" min="1" max="5">
                <button type="submit">保存</button>
            </form>
        </div>
    </div>

    <footer>
        <p>&copy; 2024 租车管理系统. 版权所有.</p>
    </footer>
    <script src="js/pagination.js"></script>
    <script src="js/modal.js"></script>
</body>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const modal = document.getElementById("edit-modal");
        const closeButton = document.querySelector(".close-button");
        const editButtons = document.querySelectorAll(".edit-button");
        const editForm = document.getElementById("edit-form");

        editButtons.forEach(button => {
            button.addEventListener("click", function () {
                const row = this.parentElement.parentElement;
                const reviewId = row.cells[0].innerText;
                const user = row.cells[1].innerText;
                const content = row.cells[2].innerText;
                const rating = row.cells[3].innerText;

                document.getElementById("edit-review-id").value = reviewId;
                document.getElementById("edit-user").value = user;
                document.getElementById("edit-content").value = content;
                document.getElementById("edit-rating").value = rating;

                modal.style.display = "block";
            });
        });

        closeButton.addEventListener("click", function () {
            modal.style.display = "none";
        });

        window.addEventListener("click", function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        });

        editForm.addEventListener("submit", function (event) {
            event.preventDefault();
            const reviewId = document.getElementById("edit-review-id").value;
            const user = document.getElementById("edit-user").value;
            const content = document.getElementById("edit-content").value;
            const rating = document.getElementById("edit-rating").value;

            // 在这里进行保存修改后的评论信息的操作
            alert(`评论已保存: ${reviewId}, ${user}, ${content}, ${rating}`);

            modal.style.display = "none";
        });
    });

</script>

</html>